<template>
  <div>
    <el-input v-model="code" auto-complete="off" placeholder="验证码" :error="codeError" style="width: calc( 100% - 160px )">
      <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
    </el-input>
    <div class="login-code" v-loading="loading" @click="refreshCode">
      <img :src="codeUrl"  class="login-code-img" />
    </div>
  </div>

</template>

<script>
 import {getCodeCaptcha} from '@/api/verify';

  export default {
    name: "CodeCaptcha",
    props:{
      username:{
        type: String,
        require: true
      }
    },
    data() {
      return {
        loading: false,
        code: '',
        time: 60,
        codeUrl:'',
        codeError:'',
      };
    },
    computed:{
    },
    watch:{
    },
    created() {
      //this.refreshCode()
    },
    methods: {
      refreshCode(){
        this.loading = true;
        getCodeCaptcha({category: 'c', username: this.username}).then(res => {
          this.codeUrl = res.data.imgData;
          this.time = res.data.time;
          this.uuid = res.data.uuid;
        }).catch(() => {}).finally(()=>{
          this.loading = false;
        })
      },
      valid(){
        if(!this.code){
          return this.codeError = '请输入验证码';
        }
        return '';
      },
      getCaptchaInfo(){
        return {
          uuid: this.uuid,
          code: this.code
        }
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">

    .login-code {
      margin-left: 3px;
      width: 155px;
      height: 38px;
      float: right;
      cursor: pointer;

      img {
        cursor: pointer;
        vertical-align: middle;
      }
    }

    .login-code-img {
      height: 38px;
    }
</style>
